<template>
    <div class="notice-list" v-loading="loading">
        <common-list @resert="resert" ref="commonListRef">
            <template #operate="{ scope }">
                <el-button v-if="store.btns.find((item) => item.name === '修改')" link type="primary" size="small" @click="editDialog(scope)">修改</el-button>
                <div v-if="store.btns.find((item) => item.name === '修改')" class="line" />
                <el-button v-if="store.btns.find((item) => item.name === '删除')" link type="primary" size="small" @click="deletes(scope)">删除</el-button>
            </template>
            <template #btns>
                <div class="btns">
                    <el-button type="primary" @click="addDialog">新增部门</el-button>
                </div>
            </template>
        </common-list>
        <el-dialog destroy-on-close v-model="dialogVisible" :title="dialogText" :close-on-click-modal="false" width="30%">
            <el-form :model="form" :rules="rules" ref="ruleFormRef" hide-required-asterisk>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="部门名称" prop="name">
                            <el-input maxlength="30" v-model="form.name" placeholder="请输入部门名称" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="button">
                    <div class="submit" @click="submit">
                        <text class="submitText">确认</text>
                    </div>
                    <div class="close" @click="close">
                        <text class="closeText">取消</text>
                    </div>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { provide, reactive, ref } from "vue";
import commonList from "@/components/commonList.vue";
import { tableConfig, formConfig, rules } from "./config";
import { getPagingList, add, update, deleteData } from "@/service/api/department.js";
import { mainStore } from "@/store/main.js";

const store = mainStore();
const formData = reactive({ name: "" });
const commonListRef = ref(null);
const loading = ref(false);
const form = ref({
    name: "",
    parentId: 0
});
const dialogVisible = ref(false);
const dialogText = ref();
const ruleFormRef = ref(null);

const addDialog = () => {
    dialogVisible.value = true;
    dialogText.value = "新增部门";
    form.value = {
        name: "",
        parentId: 0
    };
};
const editDialog = (scope) => {
    dialogVisible.value = true;
    dialogText.value = "修改部门";
    form.value = {
        id: scope.scope.row.id,
        name: scope.scope.row.name,
        parentId: 0
    };
};

const submit = () => {
    if (!ruleFormRef.value) return;
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            const loadingInstance = ElLoading.service();
            if (dialogText.value == "新增部门") {
                add(form.value)
                    .then((res) => {
                        if (res.code === 200) {
                            ElMessage({
                                message: "添加成功",
                                type: "success"
                            });
                            dialogVisible.value = false;
                        }
                        commonListRef.value.tableRef.getTableList();
                        loadingInstance.close();
                    })
                    .catch(() => {
                        loadingInstance.close();
                    });
            } else {
                update(form.value)
                    .then((res) => {
                        if (res.code === 200) {
                            ElMessage({
                                message: "修改成功",
                                type: "success"
                            });
                            dialogVisible.value = false;
                        }
                        commonListRef.value.tableRef.getTableList();
                        loadingInstance.close();
                    })
                    .catch(() => {
                        loadingInstance.close();
                    });
            }
        }
    });
};
const deletes = (scope) => {
    ElMessageBox.confirm("确定删除吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: ""
    }).then(() => {
        const loadingInstance = ElLoading.service();
        deleteData(scope.scope.row.id)
            .then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        type: "success",
                        message: "删除成功"
                    });
                }
                commonListRef.value.tableRef.getTableList();
                loadingInstance.close();
            })
            .catch(() => {
                loadingInstance.close();
            });
    });
};

const close = () => {
    dialogVisible.value = false;
};
const resert = () => {
    Object.keys(formData).forEach((key) => (formData[key] = ""));
};

provide("formData", formData);
provide("formConfig", formConfig);
provide("tableConfig", tableConfig);
provide("apiFn", getPagingList);
provide("title", "部门明细");
</script>

<style lang="less" scoped>
.notice-list {
    height: 100%;
    .line {
        display: inline-block;
        margin: 0 13px;
        width: 1px;
        height: 8px;
        border: 1px solid #dcdcdc;
    }
    .btns {
        display: flex;
        .resert {
            border: 1px solid @main-color;
            color: @main-color;
        }
    }
}
.close {
    margin-left: 8px;
    width: 78px;
    height: 30px;
    border: 1px solid #00428e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.closeText {
    color: #00428e;
    font-size: 14px;
    font-weight: 400;
}
.submit {
    width: 80px;
    height: 32px;
    background: #00428e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.submitText {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
}
.button {
    display: flex;
    justify-content: center;
}
</style>
<style>
.el-message-box__btns {
    justify-content: center;
}
.el-message-box__title {
    font-weight: 600;
    color: #1b3646;
}
.el-message-box__message {
    color: #1b3646;
}
.el-dialog__title {
    font-size: 16px;
    font-weight: 600;
    color: #1b3646;
}
</style>
